<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 14587
  Date: 2020/11/13
  Time: 16:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>友链管理</title>
    <%@include file="../common/head.jsp"%>
    <script type="text/javascript">
        $(function () {
            //先隐藏表格
            $("#createChainForm").hide();

            //点了创建分类的时候展示
            $("#creatChain").click(function () {
                $("#createChainForm").show();
                $("#creatChain").hide();
            });
            //提交完再隐藏
            $("#inputChain").click(function () {
                $("#createChainForm").hide();
                $("#creatChain").show();
            });
            //让显示的链接不过长
            $(".chain").each(function () {
                console.log(this.id);
                cut(this.id);
            });
        })
        function cut(id) {
            var link = $("#"+id).html();
            var chainLink=link;
            console.log(chainLink);
            chainLink=chainLink.substring(0,50)+"...";
            console.log(chainLink);
            $("#"+id).html(chainLink);
        }
    </script>
</head>
<body class="pic-bg">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-md-12">
            <div class="page-header">
                <h1 class="text-center" style="color: white">
                    友链管理
                </h1>
            </div>
        </div>
        <div class="col-md-8"></div>
        <div class="col-md-4">
            <div>
                <h1>
                    <small>
                        <a href="${pageContext.request.contextPath}/page/showPage" style="color:white">返回首页</a>
                        &nbsp;|&nbsp;
                        <a href="${pageContext.request.contextPath}/blog/toBlogAdmin" style="color:white">博客管理</a>
                    </small>
                </h1>
            </div>
        </div>
        <div class="col-md-2"></div>
        <div class="col-md-8" style="height:750px;overflow:auto">
            <table class="table table-hover">
                <thead style="color: white">
                <tr>
                    <th>友链名称：</th>
                    <th>添加日期：</th>
                    <th>友链地址：</th>
                    <th>操作：</th>
                </tr>
                </thead>
                <tbody>
                <c:if test="${chains!=null}">
                    <c:forEach var="chain" items="${chains}" varStatus="chainStatus">
                        <tr class="success">
                        <td>${chain.chainName}</td>
                        <td>${chain.date}</td>
                        <td><a href="${chain.link}" class="chain" id="${chainStatus.index+1}">${chain.link}</a></td>
                        <td>
                            <a href="${pageContext.request.contextPath}/chain/setFirstChain/${chain.chainId}">置顶</a>
                            &nbsp;|&nbsp;
                            <a href="${pageContext.request.contextPath}/chain/deleteChain/${chain.chainId}">删除</a>
                        </td>
                        </tr>
                    </c:forEach>
                </c:if>
                </tbody>
            </table>
            <div class="col-md-10"></div>
            <div class="col-md-2">
                <h4><a id="creatChain" href="javascript:void (0)" class="textDivBg text-right">创建新的友链</a></h4>
            </div>
            <form id="createChainForm" action="${pageContext.request.contextPath}/chain/addChain" method="post">
                <div class="row-fluid col-md-12">
                    <div class="col-md-4">
                        <label style="color: white"><h4>友链标题：</h4></label><%--添加了required表示表单的内容必须都填写完了才能提交--%>
                        <input type="text" name="chainName" autocomplete="off" class="form-control" required>
                    </div>
                    <div class="col-md-2"></div>
                    <div class="col-md-4">
                        <label style="color: white"><h4>友链链接：</h4></label><%--添加了required表示表单的内容必须都填写完了才能提交--%>
                        <input type="text" name="link" autocomplete="off" class="form-control" required>
                    </div>
                    <div class="col-md-2"></div>
                    <div class="col-md-10"></div>
                    <div class="col-md-2">
                        <button id="inputChain" type="submit" class="btn btn-default text-right">添加</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-2"></div>
    </div>
</div>
</body>
</html>
